<!--
 * @Author: 左文韬
 * @Date: 2022-12-17 12:37:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-12-17 14:51:40
 * @Description: 
 * @FilePath: \shopping-mall\src\views\Comment\comment.vue
-->
<template>
  <div class="comment_frame">
    <TopHeader />
    <div
      style="background-color: #e6e6e6; padding: 10px 0"
      class="comment_container"
    >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="comment_container">
      <div class="item_comment">
        <!-- 左侧商品图片 -->
        <div class="item_left">
          <img
            src="https://gw.alicdn.com/imgextra/i4/2024314280/O1CN014yPBWo1hUHuxeJRTw_!!2024314280.jpg_Q75.jpg_.webp"
          />
          <div class="item_left_frame">
            <p>￥4778.00</p>
            <p>4G+64G</p>
          </div>
        </div>

        <!-- 右侧评论区 -->
        <div class="item_right">
          <p>请填写商品评价:</p>
          <el-divider></el-divider>
          <div class="item_right_frame">
            <div>
              <p>商品评分</p>
              <el-rate v-model="value1"></el-rate>
            </div>
            <div>
              <p>服务评分</p>
              <el-rate v-model="value2"></el-rate>
            </div>
            <div>
              <p>服务晒单</p>
              <el-input placeholder="请输入内容" v-model="textarea2">
              </el-input>
            </div>
            <div class="upload">
              <p></p>
              <el-upload
                action="http://192.168.92.189:8082/api/uploadFile"
                list-type="picture-card"
                name="gc"
                :data="uploaddata"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>

            <div>
              <p></p>
              <div>共{{ 0 }}张，还可以传{{ 5 }}张</div>
            </div>
          </div>
          <div class="sumit_comment">
            <el-button type="warning" @click="sumitComment()"
              >提交评价</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>
  
  <script>
//header
import TopHeader from "@/components/modules/header.vue";
//Bottom组件
import Bottom from "@/components/modules/bottom.vue";
import { getShoppingcatByGW } from "@/utils/api/api.js";
export default {
  components: {
    TopHeader,
    Bottom,
  },
  data() {
    return {
      value1: 5,
      value2: 5,
      textarea2: "",
      uploaddata: {
        uid: 1,
        comid: 1,
      },
    };
  },
  methods: {
    //全选
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    sumitComment() {
      if (this.textarea2 == "") {
        this.$message({
          message: "请填写评价内容",
          type: "warning",
        });
      } else {
        this.$message({
          message: "评价成功",
          type: "success",
        });
      }
    },
    getShoppingGoods(id) {
      getShoppingcatByGW(id).then((res) => {
        console.log(res);
      });
    },
  },
  created() {
    //接收路由传参
    console.log(this.$route.query.goodsId);
    this.getShoppingGoods(this.$route.query.goodsId);
  },
};
</script>
  
  <style lang="scss" scoped>
.comment_frame {
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  .comment_container {
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    .item_comment {
      display: flex;
      justify-content: left;
      align-items: center;
      .item_left {
        box-sizing: border-box;
        padding: 20px;
        text-align: center;

        img {
          height: 300px;
          padding: 10px;
        }
        p {
          padding: 14px;
        }
        .item_left_frame {
          display: flex;
          flex-direction: column;
          p:nth-child(2) {
            color: #b9b9b9;
          }
        }
      }
      .item_right {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        border-left: 1px solid rgb(233, 233, 233);
        p {
          padding: 10px 0 0 0;
        }
        .item_right_frame {
          padding: 10px;
          div {
            display: flex;
            padding: 10px 0;
            align-items: center;
            p {
              margin-right: 40px;
              color: #b9b9b9;
              width: 10%;
            }
            .el-input {
              width: 90%;
            }

            :deep(.el-input__inner) {
              height: 100px;
            }
            :deep(.el-upload--picture-card) {
              height: 100px;
              width: 100px;
              margin: 0;
              line-height: 109px;
            }
          }
        }
      }
    }
  }
}

:deep(.el-rate__item) {
  margin: 0 6px;
}
:deep(.el-rate__icon) {
  font-size: 24px;
}
.sumit_comment {
  width: 100%;
  text-align: center;
  .el-button {
    padding: 10px 50px;
  }
}
</style>